<template>
  <div>
    <el-dialog
      v-model="visible"
      width="800px"
      custom-class="custom-dialog"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-content">
        <!-- 图片展示区域 -->
        <div class="image-area">
          <img
            :src="images[currentIndex]"
            alt="引导图片"
          />
        </div>
        <!-- 按钮区域 -->
        <div class="button-area">
          <el-button
            :disabled="currentIndex === 0"
            @click="prevStep"
            >上一步</el-button
          >
          <el-button
            :disabled="currentIndex === images.length - 1"
            type="primary"
            @click="nextStep"
            >下一步</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const visible = ref<boolean>(true);

// 图片数组，类型为字符串数组
const images = ref<string[]>([
  "https://via.placeholder.com/600x300?text=引导页1",
  "https://via.placeholder.com/600x300?text=引导页2",
  "https://via.placeholder.com/600x300?text=引导页3",
]);

// 当前图片索引，类型为数字
const currentIndex = ref<number>(0);
console.log("images", images);

// 上一步函数，无参数，无返回值
function prevStep(): void {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
}

// 下一步函数，无参数，无返回值
function nextStep(): void {
  if (currentIndex.value < images.value.length - 1) {
    currentIndex.value++;
  }
}
</script>

<style scoped>
.custom-dialog .el-dialog__wrapper {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.image-area {
  flex: 7;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

.image-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.button-area {
  flex: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: white;
  border-radius: 0 0 6px 6px;
}
</style>
